﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/qlqa.Master" Inherits="System.Web.Mvc.ViewPage<qlqa.Models.Form.HoaDonForm.HoaDonForm>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Danh sách hóa đơn
</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="CustomCss" runat="server">
    <style type="text/css">
        #ui-datepicker-div { display: none; }
        .width80 {
            display: inline-block;width: 15%;
        }
        .margin5 {
            margin:5px 0;
        }
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="row">
        <div class="panel">
            <div class="panel-body">
                <form id="form">
                    <table class="table table-responsive">
                    <tr>
                        <td>
                            <label class="control-label margin5">Ngày tháng</label>
                        </td>
                        <td style="text-align: left">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i> </span>
                                <input type="text" id="NgayHoaDon" name="NgayHoaDon" class="form-control datepicker margin-top-none" maxlength="10" placeholder="25/10/2014" />
                            </div>
                        </td>
                        <td style="text-align: right">
                            <label class="control-label">Ưu tiên theo:</label>
                        </td>
                        <td style="text-align: left">
                            <div class="form-group">
                                <div >
                                    <label class="radio-inline">
                                        <input class="radio" type="radio" name="ThuTuUuTien" id="optionsRadios1" value="0" checked="" />
                                        Mặc định</label>
                                    <label class="radio-inline">
                                        <input class="radio" type="radio" name="ThuTuUuTien" id="optionsRadios2" value="1" />
                                        Giá cao nhất </label>
                                    <label class="radio-inline">
                                        <input class="radio" type="radio" name="ThuTuUuTien" id="optionsRadios3" value="2" />
                                        Giá thấp nhất </label> 
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4">
                            <table class="table table-responsive">
                                <tr>
                                    <td><label class="control-label margin5">Từ ngày</label></td>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-calendar"></i> </span>
                                            <input type="text" id="TuNgay" name="TuNgay" class="form-control datepicker margin-top-none" maxlength="10" placeholder="25/10/2014" />
                                        </div>
                                    </td>
                                    <td><label class="control-label margin5">Đến ngày</label></td>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-calendar"></i> </span>
                                            <input type="text" id="DenNgay" name="DenNgay" class="form-control datepicker margin-top-none" maxlength="10" placeholder="25/10/2014" />
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td><label class="control-label margin5">Hóa đơn theo:</label> </td>
                        <td>
                            <label class="control-label">Tháng</label> <input type="text" id="Thang" name="Thang" maxlength="2" class="form-control width80" />
                            <label class="control-label">Năm</label> <input type="text" id="Nam" name="Nam" maxlength="4" class="form-control width80" />
                        </td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td colspan="4" style="text-align: center">
                            <input type="button" class="btn btn-primary" value="Lọc hóa đơn" onclick="LoadDanhSachHoaDon()"/>
                        </td>
                    </tr>
                </table>
                </form>

                <div id="DanhSachHoaDon"></div>
            </div>
        </div>
        
        
        <div aria-hidden="true" role="dialog" tabindex="-1" id="ModalThongTinHoaDon" class="modal fade"
             style="display: none;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">
                            ×</button>
                        <h4 class="modal-title">
                            Thông tin hóa đơn</h4>
                    </div>
                    <div class="modal-body">
                    
                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" class="btn btn-default" type="button">
                            Đóng</button>
                        <button data-dismiss="modal" class="btn btn-primary" type="button" id="btnInHoaDon" onclick="DoPrintHoaDon() ">
                            In hóa đơn</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="CustomScript" runat="server">
    <script type="text/javascript">
        function DoPrintHoaDon() {
            var idHoaDon = $("#IdHoaDon").val();
            window.open("/Report/InReport?idHoaDon=" + idHoaDon);
//            $.ajax({
//                url: "/Report/InReport",
//                data: { idHoaDon: idHoaDon },
//                success: function () { },
//                error: function () {
//                    alert("Không xuất được hóa đơn. Hãy thử lại.");
//                }
//            });
        }

        function LoadDanhSachHoaDon() {
            $.ajax({
                url: "/Table/TimKiemHoaDon",
                type: "post",
                data: $("#form").serialize(),
                success: function(data) {
                    $("#DanhSachHoaDon").html(data.html);
                }
            });
        }

        function XemThongTinHoaDon(id) {
            $.ajax({
                url: "/Table/ThongTinHoaDon",
                type: "post",
                data: { idHoaDon: id },
                success: function (data) {
                    $("#ModalThongTinHoaDon .modal-body").html(data.html);
                }
            });
        }

        $(document).ready(function () {
            LoadDanhSachHoaDon();
            $('.datepicker').datepicker({ dateFormat: 'dd/mm/yy' });
            $(".radio").uniform();
        });
    </script>
</asp:Content>